<div class="flow-timeline-wrapper">
<div class="alert" ms-if="!@showTable"><div class="loadinggif"></div></div>
<div class="flow-timeline-wrapper-content" ms-if="@showTable">


    <div class="flow-timeline-navigator">
    <a ms-click="@toggleWeeks('preWeek')" class="flow-timeline-navigator-btn flow-timeline-navigator-btn-left"><span class="left-arrow-icon"></span></a>
        <ul>

            <li ms-for="(index, el ) in @week" ms-class="{active:el.isSame(@currentday,'day') }" ms-on-click="@toggleTab(index)" >
            <!--js: console.log(el) -->
                <a ms-attr="{href: '#panel-'+index, title:el.day()}" data-toggle="tab">  <b class="navigator-day">{{el.format('dddd')}} </b> <i class="month"> / {{el.month() + 1 }} </i> {{el.date()}} <span class="num"></span> </a>
            </li>
            <li class="lastItem"><span class="calendar-icon"><input type="text" class="dateuipick"  ms-duplex="@pickupday" data-duplex-changed="@toggleWeeks" id="selectedCalendar"></span></li>
        </ul>

      <a ms-click="@toggleWeeks('nextWeek')" class="flow-timeline-navigator-btn flow-timeline-navigator-btn-right "><span class="right-arrow-icon"></span></a>
    </div>

    <div class="timeline-content tab-content" >
          <div class="timeline-panel tab-pane" ms-for="(index,dEvents) in @thisWeekData "  ms-class="{active:dEvents.moment.isSame(@currentday,'day') }" ms-attr="{id:'panel-'+index}">

          <div ms-if="!dEvents.thisDayEvents.collections.length" class="content-error">
            {{ @lang.no_results}}
          </div>
            <ul class="timeline-panel-content">
             <li class="loadingtip dispear "><a>{{@lang.loading}}</a></li>
              <li ms-for="tEvents in dEvents.thisDayEvents.collections" ms-if="tEvents.show">
                <div class="flow-active-timeline-items">
                  <div class="time">
                    <i class="red-dot-icon"></i>
                    {{ tEvents.time }}
                  </div>
                  <div class="flow-active-timeline-items-content">
                    <ul ms-if="tEvents.thisTimeEvents.collections.length">
                      <li ms-for="event in tEvents.thisTimeEvents.collections" ms-class="[event.programType+'-type-item',event.listTerminalGroupClass]" class="select-type-item">
                        <div class="flow-active-timeline-item" ms-if="event.show">
                          <div class="arrow-border">
                            <i class="ico ico-arrow-timeline-ico"></i>
                          </div>
                          <div class="flow-active-timeline-item-content">
                          <div class="type-logo"><span ms-class="event.programType+'-menu-icon'"></span>
                          </div>
                          <div class="flow-active-timeline-item-content-item">
                            <p class="title">{{ event.title}}</p>
                            <p><span class="isBetween" ms-if="event.isBetween"> </span></p>
                            <p class="others-info" ms-if="!event.info.liveTimeTip">
                            {{event.startTime.format("HH:mm")}} - {{event.endTime.format("HH:mm")}}
                             </p>
                             <p class="others-info" ms-if="event.info.liveTimeTip">
                          {{event.info.liveTimeTip}}
                             </p>

                            <p class="others-info" ms-if="event.listTerminalGroup">
                                {{@lang.groupName}} :<span ms-for="(index,g) in event.listTerminalGroup" class="author">
                                {{g.name}}    <i ms-if="index >= 0 && index != event.listTerminalGroup.length-1">,</i>
                                </span>

                            </p>
                               <p class="others-info" ms-if="event.info.PreView">


                            </p>
                            <p class="others-info" ms-if="event.info.videoSpeaker">
                                <span class="author">
                                {{event.info.videoSpeaker}}
                                </span>

                            </p>

                            <p class="others-info item-edit-menu">
                              <!-- <a  ms-click="@previewApply(event.info.PreView,event)">
                                {{@lang.preView}}
                                </a> -->
                            <a  ms-attr="{href:event.info.PreView}" target="_blank">
                                {{@lang.preView}}
                                </a>
                             <a ms-click="@editItemApply(e,event,'editItem')"> {{@lang.edit_menu}}
                                            </a>
                             <a ms-click="@editItemApply(e,event,'deleteItem')"> {{@lang.delete_menu}}
                            </a>
                            </p>

                            <p class="others-info" ms-if="event.description">

                                {{event.description}}


                            </p>




                            </div>
                          </div>
                        </div>

                      </li>
                    </ul>
                  </div>


                </div>
              </li>
              <li ms-if="!dEvents.readAll" ms-click="@clickOrpullGetMore(dEvents,index)" class="getmoretips"><a>{{@lang.pullGetMore}}</a></li>
            </ul>
            <div class="flow-timeline-item-menu">
            <select ms-change="@selectTypeGroup($event,'programTypeGroup', dEvents)">
            <option value="all">{{@lang.all}}</option>
              <option ms-for="type in dEvents.thisDayEvents.programTypeGroup" ms-attr="{value:type.gid}"  > {{type.name}}</option>
            </select>



              <select ms-change="@selectTypeGroup($event,'terminalGroup', dEvents)">
              <option value="all">{{@lang.allterminalGroup}}</option>
              <option ms-for="type in dEvents.thisDayEvents.terminalGroup" ms-attr="{value:type.gid}" >{{type.name}}</option>
              </select>

            </div>
        </div>

    </div>
</div>
    <div class="flow-timeline-menu">
      <ul >
        <li>
          <a ms-on-click="@editItemApply(e,null,'addItem')"><i class="add-menu-icon"></i>{{@menu.addmenu.name}}</a>
        </li>
        <li>
          <a ms-on-click="@menu.currentmenu.func()"><i class="edit-menu-icon"></i>{{@menu.currentmenu.name}}</a>
        </li>
        <li>
          <a ms-on-click="@menu.importmenu.func()"><i class="upload-menu-icon"></i>{{@menu.importmenu.name}}</a>
        </li>
        <li>
          <a ms-on-click="@menu.listmenu.func()"><i class="list-menu-icon"></i>{{@menu.listmenu.name}}</a>
        </li>
        <li>
          <a ms-attr-href="@menu.downloadAppClient.href" ms-on-click="@menu.downloadAppClient.func()"><i class="download-menu-icon"></i>{{@menu.downloadAppClient.name}}</a>
        </li>
        <li>
          <a ms-attr-href="@menu.downloadClient.href" ms-on-click="@menu.downloadClient.func()"><i class="download-menu-icon"></i>{{@menu.downloadClient.name}}</a>
        </li>
      </ul>
    </div>


</div>
